iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 3
1

Animation

介紹完了transition,可以了解到transition屬於比較簡易的動畫控制,所以就有了animation的出現做細節補強。此篇會先大略介紹animation,下一篇開始會有animation的屬性詳細介紹。

animation屬性

  • animation-name:@keyframe動畫名稱(可以自行取名)
  • animation-duration:動畫播放一次需要的時間,預設0,單位為s或ms
  • animation-delay:延遲多久播放動畫,預設0,單位為s或ms
  • animation-timing-function:動畫播放的速度曲線,預設ease
  • animation-iteration-count:動畫播放次數,預設1
  • animation-direction:動畫播放方向,預設normal
  • animation-fill-mode:動畫播放前後狀態,預設none
  • animation-play-state:播放播放或暫停,預設running

animation縮寫

animation: name | duration | timing-function | delay | iteration-count direction | fill-mode | play-state;

animation和transition屬性一樣,可以分開寫也可以縮寫,但也一樣有順序性,要注意!

建議:如果是多人共同開發專案建議不要使用縮寫,寫得越詳細越有利於多人專案開發。

套用多個animation

如果要套用多個animation,一樣用逗號隔開即可

.ball{
height:100px;
width:100px;
animaiton: roll 3s, move 3s;
}

今天有了animation的概念,明天將開始進行animation屬性詳細介紹

~不專業學習筆記,如有疑問或是錯誤,歡迎不吝指教~

參考來源
[1] https://www.w3schools.com/css/css3_animations.asp
[2] https://www.w3schools.com/cssref/css3_pr_animation.asp
[3] https://www.oxxostudio.tw/articles/201406/css-google-loading.html
[4] http://www.css88.com/archives/8215


上一篇
CSS動畫-Transition
下一篇
CSS動畫-Animation(二)(name/duration/delay/timing-function)
系列文
30天讓設計師搞定CSS/SVG動畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言